import React, { Component } from 'react'
import ReactEcharts from 'echarts-for-react'
import { findGoods } from '../../api/goods'
export default class Chart extends Component {
  state = {
    option: [],
  }

  // 获取商品列表
  getGoods = () => {
    findGoods().then((res) => {
      // this.setState({ data: res.data.data })
      // console.log(res.data.data)
      let data = res.data.data
      let state1 = data.filter((v) => v.state).length
      let state0 = data.length - state1
      console.log(state1, state0)
      let obj = [
        { value: state1, name: '上架商品' },
        { value: state0, name: '下架商品' },
      ]
      this.setState({ option: obj })
    })
  }
  componentDidMount() {
    this.getGoods()
  }
  getOptions = () => {
    return {
      title: {
        text: '商品上下架统计',
        subtext: '蜗牛商城',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
      },
      series: [
        {
          name: '类型',
          type: 'pie',
          radius: '50%',
          data: this.state.option,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    }
  }

  render() {
    return (
      <div style={{ display: 'flex' }}>
        <ReactEcharts
          option={this.getOptions()}
          style={{ height: '350px', width: '50%' }}
          className="react-for-echars"
        ></ReactEcharts>
      </div>
    )
  }
}
